<template>
  <div class="app-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div v-permission="['admin', 'prize_add_institution']" slot="header">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0"
            ><el-input
              v-model="form.name"
              placeholder="请输入名称"
              size="small"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-button type="primary" size="small" @click="add()"
              >新增</el-button
            >
          </el-col>
        </el-row>
      </div>
      <el-table :data="List" border stripe>
        <el-table-column
          prop="name"
          label="名称"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button
              v-permission="['admin', 'prize_delete_institution']"
              type="danger"
              size="mini"
              plain
              icon="el-icon-delete"
              @click="del(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import { getCategoryList, delCategory, addCategory } from "@/api/rule";
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
export default {
  components: { Pagination },
  directives: { permission },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      List: [],
      form: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getCategoryList(this.listQuery).then(res => {
        this.total = res.count;
        this.List = res.results;
      });
    },
    del(id) {
      delCategory(id).then(res => {
        this.getList();
        this.$message.success("删除成功");
      });
    },
    add() {
      addCategory(this.form).then(res => {
        this.getList();
        this.form = {};
        this.$message.success("新增成功");
      });
    }
  }
};
</script>

<style></style>
